<template>
  <view>
    <u-navbar title="评价" back-icon-size="34" title-size="36" :border-bottom="false" title-color="#222222" back-icon-color="#222222"></u-navbar>
    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="eval">
      <view class="" style="margin-top: 20rpx; background: #fff; width: 100%" v-for="(i, k) in evallist" :key="k">
        <!-- 人 -->
        <view class="" style="display: flex; align-items: flex-start; justify-content: space-between; padding-top: 34rpx">
          <view class="" style="display: flex; align-items: center; padding: 15rpx 0 30rpx 30rpx">
            <image :src="i.avatar" mode="" style="width: 79rpx; height: 79rpx; border-radius: 50%"></image>
            <view class="" style="padding-left: 18rpx; font-size: 28rpx">
              <view class="">
                {{ i.nickname }}
              </view>
              <view class="" style="font-size: 26rpx; color: #666666">
                <text>已购商品：{{ i.goods_name }}</text>
              </view>
            </view>
          </view>
          <view class="" style="font-size: 24rpx; color: #999999; padding-right: 30rpx">
            {{ i.create_time_text }}
          </view>
        </view>

        <view class="" style="padding: 0 31rpx; font-size: 28rpx">
          {{ i.content }}
        </view>
        <view class="" style="padding: 15rpx 30rpx; display: flex; padding-bottom: 58rpx; align-items: center">
          <image :src="img_url + m" mode="aspectFill" style="width: 200rpx; height: 200rpx; border-radius: 20rpx; margin-right: 20rpx" v-for="m in i.images"></image>
        </view>
        <view class="" style="padding-left: 34rpx; display: flex; align-items: center; justify-content: space-between">
          <view class="">
            <image src="https://wenzhen.fuerle168.com/static/shop/xing.png" mode="" style="width: 28rpx; height: 28rpx; margin-right: 10rpx" v-for="n in i.star"></image>
          </view>

          <view class="" style="font-size: 26rpx; color: #999999; padding-right: 34rpx">浏览量：{{ i.views }}</view>
        </view>
        <view class="" style="display: flex; align-items: center; justify-content: flex-end; margin-right: 28rpx; font-size: 28rpx; padding-bottom: 20rpx" @tap="pj(i.evaluate_id)">
          <view class="">
            {{ i.eva_count }}
          </view>

          <image src="https://wenzhen.fuerle168.com/static/shop/pl.png" mode="" style="width: 28rpx; height: 28rpx; margin-left: 8rpx"></image>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      id: null,
      page: 1,
      evallist: [],
      boxHeight: ''
    };
  },
  onReady() {
    this.box();
  },
  //方法
  methods: {
    pj(e) {
      uni.navigateTo({
        url: '/shop/pjpl/pjpl?id=' + e
      });
    },
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },
    eval(e) {
      if (e == 1) {
        this.evallist = [];
        this.page = 1;
      }
      this.api({
        url: '/api/shop/evaluateList',
        method: 'post',
        data: {
          page: this.page,
          goods_id: this.id
        }
      }).then((res) => {
        this.evallist = this.evallist.concat(res.data);
        this.page++;
      });
    }
  },
  //首页渲染
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.eval(1);
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}
</style>
